<template>
	<view>
		<EmpireNavigate title="收货地址"></EmpireNavigate>
		<AddressCard
			v-for="(item, key) in address"
			:key="key"
			v-model:checked="item.default"
			v-model:value="item.serial"
			:title="item.name"
			:telephone="item.telephone"
			:address="item.address"
			@change="handleCheckboxChange"
		/>
		<view class="box-padding__lr">
			<button type="warn">新增收货地址</button>
		</view>
	</view>
</template>

<script setup>
import EmpireNavigate from '@/components/empire-navigate.vue';
import AddressCard from '@/components/address/address-card.vue';
import { ref, toRefs } from 'vue';
import { useAppStore } from '@/store/store.js';

const store = useAppStore();

const { address } = toRefs(store);
console.log(address);
function handleCheckboxChange(event) {
	console.log(event);
}
</script>

<style lang="scss" scoped></style>
